	<template>
	<view>
		<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" :title="navBar.title"></com-nav-bar>
		
		<view style="padding:0 20rpx 100rpx;background-color: #fff;">
			<u-form :model="createForm" ref="createForm" label-width="160">
				
				<u-form-item label="商品类型" required prop="local_life_type">
					<u-input v-model="type_name" placeholder="请选择商品类型" type="select" @click="selectType = true" />
					<u-action-sheet :list="local_life_types" v-model="selectType" @click="selectTypeHandler"></u-action-sheet>
				</u-form-item>
				
				<u-form-item label="商品分类" required prop="mchGoodsCats">
					<u-input v-model="cat_name" placeholder="请选择商品分类" type="select" @click="selectCat = true" />
					<u-action-sheet :list="catsList" v-model="selectCat" @click="selectCatHandler"></u-action-sheet>
				</u-form-item>
				
				<u-form-item label="商品名称" label-position="top" required prop="name">
					<u-input v-model="createForm.name" placeholder="请输入商品名称,不超过60个文字~" type="textarea" maxlength="60"/>
				</u-form-item>
				
				<u-form-item label="商品图片" label-position="top" required prop="pic_url">
					<u-upload :file-list="fileList"
						@on-choose-complete="fileChange"
						:auto-upload="false"
						:max-size="5 * 1024 * 1024" 
						max-count="9"
						width="150" 
						height="150"></u-upload>
				</u-form-item>
				
				<u-form-item label="原价" required prop="original_price">
					<u-input v-model="createForm.original_price" placeholder="请输入原价(以划线形式显示)" type="number" />
				</u-form-item>
				
				<u-form-item label="销售价" v-if="createForm.local_life_type != 2" required prop="price">
					<u-input v-model="createForm.price" placeholder="请输入销售价(实际价格)" type="number" />
				</u-form-item>
				
				<u-form-item label="购物券价" v-if="createForm.local_life_type == 2" required prop="price">
					<u-input v-model="createForm.shopping_price" placeholder="请输入购物券价" type="number" />
				</u-form-item>
				
				<u-form-item label="库存数量" required prop="goods_num">
					<u-input v-model="createForm.goods_num" placeholder="请输入库存数量" type="number" />
				</u-form-item>
				
				<u-form-item label="单位" required prop="unit">
					<u-input v-model="createForm.unit" placeholder="请输入单位名称,如:个,件,箱..." type="text" />
				</u-form-item>
				
				<u-form-item label="核销次数" required prop="clerk_num">
					<u-input v-model="createForm.clerk_num" placeholder="请输入核销次数" type="number" />
				</u-form-item>
				
				<u-form-item label="是否限购">
					<u-switch slot="right" size="40" v-model="limitStatus" @change="limitStatusChange"></u-switch>
				</u-form-item>
				
				<u-form-item v-if="limitStatus" label="限购数量" required prop="confine_count">
					<u-input v-model="createForm.confine_count" type="number" />
				</u-form-item>
			
				<u-form-item label="商品详情" label-position="top" required prop="detail">
					<!-- <u-input v-model="createForm.detail" placeholder="请输入商品详情" type="textarea" :auto-height="true" height="300"/> -->
					
					<view style="width: 100%;" @click="$refs.comEditor.show()">
						<view style="color:#c0c4cc" v-if="createForm.detail == ''">点击开始输入</view>
						<u-parse v-else :html="createForm.detail"></u-parse>
					</view>
					
					<com-editor ref="comEditor" @confirm_input="confirmInputHandler" :content="createForm.detail"></com-editor>
				</u-form-item>
			</u-form>
		</view>
		<view @click="createProduct" class="submit-btn">保存</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				navBar:{
					title:'添加商品',
				},
				
				createForm:{
					id:'',
					name:'',
					pic_url:'',
					local_life_type:'',
					mchGoodsCats:'',
					original_price:'',
					price:'',
					shopping_price:'',
					goods_num:'',
					confine_count:-1,
					clerk_num:1,
					detail:'',
					unit:'',
					attr:[]
				},
				
				fileList:[],
				
				selectType:false,
				type_name:'',
				local_life_types:[
					{text:'店内商品',value:1},
					{text:'购物券商品',value:2},
					{text:'特价团购',value:3},
					{text:'引流商品',value:4},
				],
			
				selectCat:false,
				cat_name:'',
				catsList:[],
				
				limitStatus: false,
				
				rules:{
					local_life_type:[
						{
							validator: (rule, value, callback) => {
								if(this.createForm.local_life_type){
									return true;
								}else{
									return false;
								}
							},message: '请选择商品类型',trigger: ['change','blur'],
						}
					],
					mchGoodsCats:[
						{
							validator: (rule, value, callback) => {
								if(this.createForm.mchGoodsCats){
									return true;
								}else{
									return false;
								}
							},message: '请选择商品分类',trigger: ['change','blur'],
						}
					],
					name: [
						{required: true,message: '请输入商品名称',trigger: 'blur,change'}
					],
					pic_url:[
						{
							validator: (rule, value, callback) => {
								if(this.fileList.length <= 0){
									callback(new Error('请上传商品图片'));
								}
								if(this.fileList.length > 9){
									callback(new Error('商品图片不能超过9张'));
								}
								return true;
							},trigger: ['change','blur'],
						}
					],
					original_price:[{required: true,message: '请输入划线价',trigger: 'blur,change'}],
					goods_num:[
						{
							validator: (rule, value, callback) => {
								if(this.createForm.goods_num <= 0){
									callback(new Error('请输入有效的库存数量'));
								}
								return true;
							},trigger: ['change','blur'],
						}
					],
					unit:[{required: true,message: '请输入单位',trigger: 'blur,change'}],
					detail:[{required: true,message: '请输入商品详情',trigger: 'blur,change'}],
					price:[
						{
							validator: (rule, value, callback) => {
								if(this.createForm.local_life_type != 2){
									if(!this.createForm.price){
										callback(new Error('请输入销售价'));
									}
								}else{
									if(!this.createForm.shopping_price){
										callback(new Error('请输入购物券价'));
									}
								}
								return true;
							},trigger: ['change','blur'],
						}
					],
					confine_count:[
						{
							validator: (rule, value, callback) => {
								if(this.limitStatus && this.createForm.confine_count <= 0){
									callback(new Error('该限购数量无效'));
								}
								return true;
							},trigger: ['change','blur'],
						}
					],
					clerk_num:[
						{
							validator: (rule, value, callback) => {
								if(!this.createForm.clerk_num){
									callback(new Error('请输入核销次数'));
								}
								if(this.createForm.clerk_num <= 0){
									callback(new Error('核销次数必须大于0'));
								}
								return true;
							},trigger: ['change','blur'],
						}
					]
				},
			}
		},
		async onLoad(opt){
			await this.getProductCats();
			this.createForm.id = opt.id ?? '';
			if(this.createForm.id){
				this.navBar.title = '编辑商品';
				this.getProductInfo()
			}
		},
		onReady(){
			this.$refs.createForm.setRules(this.rules);
		},
		methods:{
			back(){
				this.navBack()
			},
			
			selectTypeHandler(index){
				this.type_name = this.local_life_types[index].text;
				this.createForm.local_life_type = this.local_life_types[index].value;
			},
			selectCatHandler(index){
				this.cat_name = this.catsList[index].text;
				this.createForm.mchGoodsCats = this.catsList[index].value;
			},
			
			//选择文件后
			async fileChange(fileList){
				let that = this;
				for(let i=0;i < fileList.length;i++){
					if(fileList[i].progress < 100){
						let res = await that.$http.uploadFile({
							serverUrl: that.$api.default.upload,
							fileKeyName: "file",
							file: fileList[i].url
						});
						fileList[i].response = res;
						if(res.code !== 0){
							fileList.splice(i,1);
							return that.$http.toast(res.msg);
						}
						fileList[i].progress = 100;
						fileList[i].id = res.data.id;
						fileList[i].url = res.data.url;
					}
				}
				this.fileList = fileList;
				console.log('file',this.fileList)
			},
		
			//产品分类
			async getProductCats(){
				let res = await this.$http.request({
					url:this.$api.moreShop.getcategorylist,
					method:'post',
					showLoading:true
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				let newList = [];
				res.data.list.forEach((item,index) => {
					newList[index]={text:item.name,value:item.id};
				})
				this.catsList = newList
			},
			
				
			limitStatusChange(value){
				if(value){
					this.createForm.confine_count = 1;
				}else{
					this.createForm.confine_count = -1;
				}
			},
			
			//保存商品
			async createProduct(){
				let that = this;
				
				if(that.createForm.local_life_type == 2){
					that.createForm.price = (that.createForm.shopping_price / 10).toFixed(2);
				}
				let pic_url = [];
				this.fileList.forEach((item,index) => {
					pic_url[index] = {id:item.id,pic_url:item.url}
				})
				that.createForm.pic_url = pic_url;
				
				that.$refs.createForm.validate( async valid => {
					if (valid) {
						let res = await that.$http.request({
							url:that.$api.moreShop.MchProductCreate,
							method:'post',
							data:that.createForm,
							showLoading:true
						});
						if(res.code !== 0){
							return that.$http.toast(res.msg);
						}
						that.$http.toast('保存成功~');
						setTimeout(function(){
							uni.navigateTo({url:'/mch/personalCentre/product/list'})
						},2000)
					}
				});
			},
	
			//获取商品信息
			async getProductInfo(){
				let that = this;
				let res = await that.$http.request({
					url: that.$api.moreShop.MchProductDetail,
					method:'post',
					data:{goods_id:that.createForm.id},
					showLoading:true
				});
				if(res.code !== 0){
					that.$http.toast(res.msg);
					setTimeout(function(){
						uni.navigateTo({url:'/mch/personalCentre/product/list'})
					},2000);
					return ;
				}
				that.createForm = res.data;
				
				let fileList = [];
				that.createForm.pic_url.forEach((item,index)=>{
					fileList[index] = {id:item.id,url:item.pic_url,progress:100}
				})
				that.fileList = fileList;
				
				let typeObj = that.local_life_types.find(item=>{
					return item.value == that.createForm.local_life_type
				})
				this.type_name = typeObj.text;
				
				
				let catObj = that.catsList.find(item=>{
					return item.value == that.createForm.mchGoodsCats
				})
				that.cat_name = catObj.text;
				
				if(that.createForm.confine_count > 0){
					that.limitStatus = true;
				}
			},
			
			confirmInputHandler(content){
				this.createForm.detail = content;
				console.log(123123,content)
			}
		}
	}
</script>

<style lang="scss">

	.submit-btn{
		width: 100vw;
		position: fixed;
		bottom: 0;
		padding: 20rpx;
		text-align: center;
		background-color: #2b85e4;
		color:#fff;
		font-size: 14pt;
		z-index: 99;
	}
</style>